<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=doc-example/tutorial-async
-->
<!DOCTYPE html>
<html style="height: 100%">

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>

<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};

	var option;

	function fetchData(cb) {
		// 通过 setTimeout 模拟异步加载
		setTimeout(function () {
			cb({
				categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
				data: [5, 20, 36, 10, 10, 20]
			});
		}, 1000);
	}

	// 初始 option
	option = {
		title: {
			text: '异步数据加载示例'
		},
		tooltip: {},
		legend: {
			data: ['销量']
		},
		xAxis: {
			data: []
		},
		yAxis: {},
		series: [{
			name: '销量',
			type: 'bar',
			data: []
		}]
	};

	fetchData(function (data) {
		myChart.setOption({
			xAxis: {
				data: data.categories
			},
			series: [{
				// 根据名字对应到相应的系列
				name: '销量',
				data: data.data
			}]
		});
	});

	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
</script>

</html>